<template>
  <div class="video-detail">
    <video :src="video.url" :poster="video.cover" autoplay loop controls muted></video>
    <el-row type="flex" justify="space-between">
      <div>
        <div class="title">{{ video.name }}</div>
        <div class="tag-list">
          <span class="tag" v-for="item in video.tagList" :key="item" >{{ item }}</span>
        </div>
      </div>      
      <div class="right">
        <div @click="addVote()" class="vote">
          <svg-icon :icon-class="status? 'heart-solid':'heart'" class="icon"/>
          <span>{{status? '取消点赞': '点赞'}}</span>
        </div>
        <div @click="copyToClipboard" class="share">
          <svg-icon icon-class="share" class="icon"/>
          <span>转发</span>
        </div>
      </div>
    </el-row>
    <div class="desc">{{ video.remark }}</div>
    <div>
      <span class="number">{{ video.likeNum || 0 }}</span>
      <span class="like">人喜欢</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

import {programDetail, voteStatus, vote, disVote} from '@/api/pcApi'

const route = useRoute();
const status = ref(false);
const video = ref({
  id: '',
  name: '',
  cover: '',
  url: '',
  tagList: '',
  remark: '',
  userId: '',
  userName: '',
  createTime: '',
  createBy: '',
  programTypeId: '',
});

const fetchVideoDetails = (id) => {
  programDetail(id).then((res) => {
    video.value = res;
    video.value.tagList = res.tag.split(',');
    console.log(res);
  }).catch((err) => {
    console.error(err);
  });
};

const getVoteStatus = (id) => {
  voteStatus(id).then((res) => {
    status.value = res;
  }).catch((err) => {
    console.error(err);
  });
};

const addVote = () => {
  status.value = !status.value;
  if (!status.value) { // 取消点赞
    disVote(video.value.id).then((res) => {
      console.log(res);
    }).catch((err) => {
      status.value = !status.value;
      console.error(err);
    });
  } else { // 点赞
    vote(video.value.id).then((res) => {
      console.log(res);
    }).catch((err) => {
      status.value = !status.value;
      console.error(err);
    });
    getVoteStatus(video.value.id)
  }
  
};

function copyToClipboard(){
  const text = window.location.href;
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('链接已成功复制到剪贴板');
  }).catch(err => {
    ElMessage.error('复制失败:', err);
  });
}

onMounted(() => {
  video.value.id = route.params.id;
  fetchVideoDetails(video.value.id);
  getVoteStatus(video.value.id);
});

</script>

<style lang="less" scoped>
.video-detail {
  width: 1160px;
  margin: 0 auto;
  margin-bottom: 180px;
  video {
    height: 652px;
    width: 100%;
    margin-bottom: 50px;
  }
  .title {
    font-size: 24px;
    font-weight: 700;
    color: #A30000;
  }
  .tag-list {
    margin-top: 16px;
    .tag {
      padding: 6px 16px;
      background: #F9F9F9;
      color: #A30000;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 500;
      margin-right: 10px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .vote, .share {
      display: flex;
      align-items: center;
      margin-left: 16px;      
      padding: 10px 30px;
      cursor: pointer;
      border: 1px solid #303046;
      border-radius: 50px;
      span {
        font-size: 14px;
        font-weight: 600;
        margin-left: 6px;
      }
      .icon {
        font-size: 18px;
        color: #A30000;
      }
      &:hover {
        background: #A30000;
        color: white;
        border-color: #A30000;
        .icon {
          color: white;
        }
      }
    }
  }
  .desc {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .number {
    font-size: 16px;
    font-weight: 700;
    margin-right: 3px;
    color: #A30000;
  }
  .like {
    font-size: 14px;
    color: #88888C;    
  }
}
</style>
